<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>
    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>
    <script src="js/flexible.min.js" type="text/javascript"></script>
    <script src="../../layui-v2.2.5/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../layui-v2.2.5/layui/css/layui.css" media="all">
    <title>交易记录</title>
    <style>
        .jilu {
            background-color: #fff;
            padding: 10px 0;
            margin-top: 0px;

            font-size: 15px;
            position: fixed;
            width: 100%;
        }

        .jilu li {
            float: left;
            margin-left: 30px;
        }

        .dianji {
            border-bottom: 2px solid #ff0082;
        }
    </style>
</head>
<body style="background-color: rgb(242,242,242);">
<c:if test="${fn:length(data.list)==0}">
    <div>
        <img src="img/hy28.png" class='record_img'>
        <div class='record'>暂无交易记录</div>

    </div>

</c:if>
<c:if test="${fn:length(data.list)>0}">

    <!- cardState 0交易成功 1 交易失败 2 处理中 3 已打款 -!>

    <div class='jilu'>
        <ul>
            <li class="dianji">全部</li>
            <li data-li="0">交易成功</li>
            <li data-li="1">交易失败</li>
            <li data-li="2">处理中</li>

        </ul>
    </div>

    <br/>
    <br/>
    <br/>

    <div id="demo"></div>


</c:if>

<script>
    setCardState();
    $('.jilu li').click(function () {
        $(this).siblings('li').removeClass('dianji');  // 删除其他兄弟元素的样式
        $(this).addClass("dianji");
        console.log($(this).attr('data-li'));
        setCardState($(this).attr('data-li'));
    });

    function setCardState(cardState) {
        $('#demo').empty();
        layui.use('flow', function () {
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                isAuto: false
                , elem: '#demo' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('/mobile/getOrderCardFlowList?cardState=' + cardState + '&page=' + page, function (res) {
                        //假设你的列表返回在data集合中

                        layui.each(res.data, function (index, item) {

                            var str =
                                "<div class='commodity'>"
                                + "<div class='commodity_bianhao' style=' font-size:14px;'> " + item.createTime + "<span style='float: right; font-size:14px;color:#000;'> " + item.cardStr + "</span>" + "</div>"

                                + "<div class='commodity_all' style='border-radius: 0'>"
                                + "<img src='" + item.imgPath + "' class='commodity_image'>"
                                + "<div class='commodityInfo'>"
                                + "<div class='leixing'>"
                                + "      <div class='one'>类型:<span></span></div>"

                                + "<div>" + item.className + "</div>"
                                + "  </div>"
                                + "<div class='leixing'>"
                                + "      <div class='one'>卡号:<span></span></div>"

                                + "<div>" + item.cardNumber + "</div>"
                                + "  </div>"
                                + "<div class='leixing'>"
                                + "      <div class='one'>卡密:<span></span></div>"

                                + "<div>" + item.cardPassword + "</div>"
                                + "  </div>"

                                + "</div>"

                                + "</div>"
                                + "<div class='commodity_bianhao' style='display:flex;justify-content : space-around;border-top-left-radius: 0;border-top-right-radius: 0;border-bottom-left-radius: .3rem;border-bottom-right-radius: .3rem;border-top: 1px solid #151515;'> "

                                + "<div style='font-size:14px;'>"
                                + "<span>面值：" + "</span>"
                                + "<span> " + item.feedbackValue + "</span>"
                                + "</div>"
                                + "<div style='color: #f00;font-size:14px;'>"
                                + "<span>折扣：" + "</span>"
                                + "<span> " + item.discount + "折</span>"
                                + "</div>"
                                + "<div style='color: #f00;font-size:14px;'>"
                                + "<span >回收价:" + "</span>"
                                + "<span> " + item.money + "</span>"
                                + "</div>"
                                + "</div>"


                                + "</div>";
                            lis.push(str);
                        });

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.pages);
                    });
                }
            });
        });
    }
</script>
</body>
</html>